<template>
  <div class="IMGCOM">
    <div class="IMGCOMContent">
      <CacheImg
        class="imgStyle"
        :src="getSrc(openFile)"
        :zip-and-cache="false"
        @click.stop="switchImg"
      />
      <NavBar
        :imgs-list="previewSrcList"
        @imgDivClick="(itme,index)=>{imgClose(index)}"
        :show-index="showIndex"
      ></NavBar>
    </div>

    <ViewerImgs
      :imgs-list="previewSrcList"
      :imgs-name-list="imgsNameList"
      ref="ViewerImgsRef"
      @view="imgClose"
    ></ViewerImgs>
  </div>
</template>

<script>
import {CommonPropsMixin} from "@/views/dashboard/CommonPropsMixin";
import fileReq from "@/api/file.js";
import {imgTypeOptions} from "@/config/options";
import ViewerImgs from "@/components/ViewerImgs/ViewerImgs.vue";
import CacheImg from "@/components/CacheImg/index.vue";
import NavBar from "@/components/ViewerImgs/NavBar.vue";
import {PathUtils} from "@/utils/PathUtils.ts";
export default {
  name: "IMGCOM",
  components: {NavBar, CacheImg, ViewerImgs},
  mixins: [CommonPropsMixin],
  computed: {
    comFileList() {
      return this.fileList.filter(i=>{
        const fileType=PathUtils.extName(i.fileName)
        let lowType = fileType.toLowerCase()
        return imgTypeOptions.includes(lowType)
      })
    },
    imgsNameList() {
      return this.comFileList.map(i=>{
        return i.fileName
      })
    },
    previewSrcList() {
      return this.comFileList.map(i=>{
        return this.getSrc(i.fileName)
      })
    },
    showIndex() {
      return this.imgsNameList.findIndex(i=>i===this.openFile)
    }
  },
  created() {
  },
  methods: {
    switchImg(event) {
      this.$refs.ViewerImgsRef.show(this.showIndex)
    },
    imgClose(index) {
      this.$router.push({
        query: {
          open: this.comFileList[index].fileName
        }
      })
    },
    getSrc(file) {
      return fileReq.getFileUrl(PathUtils.resolve(this.baseFilePath,file))
    },
  }
}
</script>

<style lang="scss" scoped>
.IMGCOM{
  .IMGCOMContent{
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
  }
  .imgStyle{
    width: 100%;
    height: calc(70vh - 100px);
    margin-bottom: 20px;
    object-fit: scale-down;
    cursor: pointer;
  }
}
</style>
